 <template>
    <div id="uploaderCpt">
        <input id="inputFile" multiple type="file" @change='change' style="display: none;"/>
        <el-button type="primary" @click="uploadFile">上传文件</el-button>
        <div class="p10" style="display: flex;width: 500px;height: 600px;">
            <transition-group name="fade" tag="div">
            <div  v-for="(item,index) in uploadUI" :key="index">
                <div class="row-type">
                    <el-row type="flex" class="row-bg">
                        <el-col :span="18" class="col-type">
                            <div class="pb5 title-type">
                                {{item.fileName}}
                            </div>
                            <div class="speed-type" v-if="item.chirldren?false:true">
                                {{size}} / {{item.fileSize}}{{item.str}}&nbsp;&nbsp;|&nbsp;&nbsp;<span>1.5MB/s </span>&nbsp;&nbsp;剩余21秒
                            </div>
                        </el-col>
                        <el-col :span="4" v-if="(item.chirldren && !item.isSecondPass)?false:true">
                            <div class="grid-content bg-purple-light">
                                <el-progress type="circle" :percentage="item.percentage" :width=40 :stroke-width=3></el-progress>
                            </div>
                        </el-col>
                        <el-col :span="4" class="playOrPause">
                            <div  class="playOrPause">
                                <div @click="playOrPauseFuc(index)" class="playOrPauseButton">
                                    <img :src="item.playOrPause"/>
                                </div>
                                <div class="playOrPauseButton" @click="deleteCurrent(index)">
                                    <img src="../../../resources/assets/uploader/delete.png"/>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="row-type" v-if="(item.chirldren && !item.isSecondPass)?true:false" v-for="items in item.chirldren">
                    <el-row type="flex" class="row-bg">
                        <el-col :span="4"></el-col>
                        <el-col :span="18" class="col-type">
                            <div class="pb5 title-type">
                                {{items.fileName}}
                            </div>
                            <div class="speed-type">
                                {{size}} / {{items.fileSize}}{{items.str}}&nbsp;&nbsp;|&nbsp;&nbsp;<span>1.5MB/s </span>&nbsp;&nbsp;剩余21秒
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple-light">
                                <el-progress type="circle" :percentage="items.percentage" :width=40 :stroke-width=3></el-progress>
                            </div>
                        </el-col>
                        <!--<el-col :span="4" class="playOrPause">-->
                            <!--<div  class="playOrPause">-->
                                <!--<div @click="playOrPauseFuc(index)" class="playOrPauseButton">-->
                                    <!--<img :src="items.playOrPause"/>-->
                                <!--</div>-->
                                <!--<div class="playOrPauseButton" @click="deleteCurrent(index)">-->
                                    <!--<img src="../../../resources/assets/uploader/delete.png"/>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</el-col>-->
                    </el-row>
                </div>

            </div>
            </transition-group>
        </div>
    </div>
</template>
<script>
    import upload from '../../../main/util/upLoader.js';
    import { UPLOADITEM } from '../../store/mutation-types.js'
    export default {
        props:[
           "uploadOpt"
        ],
        data(){
            return{
                playOrPause:require('../../../resources/assets/uploader/pause.png'),
                PauseStatus:false,
                fileName:"",
                fileSize:"",
                str:'',
                uploadUI:[]
            }
        },
        methods:{
            uploadFile(){
                document.getElementById('inputFile').click();
            },
            change(e){
                for(let i = 0; i < e.target.files.length; i++){
                    let fileName = e.target.files[i].name;
                    let fileSize = e.target.files[i].size;
                    let chunks = Math.ceil(fileSize/this.uploadOpt.blodSize);
                    let str = "";
                    if(fileSize>=1024){
                        str="KB";
                        fileSize/=1024;
                        fileSize = fileSize.toFixed(2);
                        if(fileSize>=1024){
                            str="MB";
                            fileSize/=1024;
                            fileSize = fileSize.toFixed(2);
                        }
                    }else{
                        str="B";
                    }
                    debugger

                    if(chunks <= 1){
                        this.uploadUI.push({"fileName":fileName,"fileSize":fileSize,"str":str,"PauseStatus":true,"playOrPause":require('../../../resources/assets/uploader/play.png'),"percentage":0,"chunk":1});
                    }else{
                        this.uploadUI.push({"fileName":fileName,"fileSize":fileSize,"str":str,"PauseStatus":true,"playOrPause":require('../../../resources/assets/uploader/play.png'),"percentage":0,'chirldren':[],"isSecondPass":false});
                        for(let j = 0; j < chunks; j++){
                            let s = this.$store.state.uploadItem;
                            this.uploadUI[s+i].chirldren.push({"fileName":fileName+(j+1),"fileSize":fileSize,"str":str,"PauseStatus":true,"playOrPause":require('../../../resources/assets/uploader/play.png'),"percentage":0,"chunk":j+1});
                        }
                    }

                }
                this.$store.commit(UPLOADITEM,this.$store.state.uploadItem+e.target.files.length);
                let uploader = new upload();
                uploader.opt = this.uploadOpt;
                let that = this;
                uploader.onProgress = function(es){
                    that.onProgress(this);
                };
                uploader.onChange(e);
            },
            playOrPauseFuc(index){
                this.uploadUI[index].PauseStatus = !this.uploadUI[index].PauseStatus;
                // this.PauseStatus = !this.PauseStatus;
                if(this.uploadUI[index].PauseStatus){
                    this.uploadUI[index].playOrPause = require('../../../resources/assets/uploader/play.png');
                }else{
                    this.uploadUI[index].playOrPause = require('../../../resources/assets/uploader/pause.png');
                    upload.uploadFile();
                }
            },
            deleteCurrent(index){
                debugger
                for(let i in this.uploadUI){
                    if(index == i){
                        this.uploadUI.splice(i,1)
                    }
                }
            },
            onProgress(es){
                // console.log(es);
                debugger
                for(let i = 0; i < this.uploadUI.length; i++){
                    for(let j = 0; j < this.uploadUI[i].chirldren.length; j++){
                        if(JSON.parse(es).chunk == this.uploadUI[i].chirldren[j].chunk){
                            debugger
                            this.uploadUI[i].chirldren[j].percentage = parseInt((parseInt(JSON.parse(es).bytesRead)/parseInt(JSON.parse(es).contentLength)*100)).toFixed(0);
                        }
                    }
                }
            }
        },
        mounted(){
            // upload.opt = this.uploadOpt;
            // upload.opt.onProgress = this.onProgress;
        },
        computed:{
            size(){
                debugger
                let per = JSON.parse(this.$store.state.progress);
                for(let i = 0; i < this.uploadUI.length; i++){
                    for(let j = 0; j < this.uploadUI[i].length; j++){
                        if(per.chunk == this.uploadUI[i][j].chunk){
                            this.uploadUI[i][j].percentage = (parseInt(per.bytesRead)/parseInt(per.contentLength*100)).toFixed(0);
                        }
                    }
                }
                return '';
            }
        }
    }
</script>
<style scoped>
    .row-type {
        width: 500px;
        padding:10px 0;
        border-bottom: 1px solid #dddddd;
    }

    .col-type {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .playOrPause {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .playOrPauseButton {
        height: 24px;
        width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fade-enter-active{transition: all 1s;}
    .fade-leave-active {position: absolute;transition: all 1s;}
    .fade-enter{opacity: 0;transition: transform .5s;}
    .fade-leave-to{opacity: 0;transition: transform .5s;}
    .fade-move {
        transition: transform 1s;
    }
</style>